<template>
  <div class="algorithm-config-panel">
    <div class="panel-header">
      <h3>📜 参数配置 - {{ algorithmName }}</h3>
    </div>

    <div class="config-form" v-if="localParams && paramsSchema.length">
      <div v-for="field in paramsSchema" :key="field.name" class="form-item">
        <label class="form-label">
          {{ field.label }}
          <span class="required" v-if="field.required">*</span>
          <span class="tooltip" v-if="field.description" :title="field.description">ℹ️</span>
        </label>
        
        <!-- String Input -->
        <input 
          v-if="field.type === 'string' || field.type === 'text'" 
          type="text" 
          v-model="localParams[field.name]"
          :placeholder="field.placeholder"
        />

        <!-- Number Input -->
        <input 
          v-if="field.type === 'number'" 
          type="number" 
          v-model.number="localParams[field.name]"
          :min="field.min"
          :max="field.max"
          :step="field.step || 1"
        />

        <!-- Select -->
        <select v-if="field.type === 'select'" v-model="localParams[field.name]">
          <option v-for="opt in field.options" :key="opt.value" :value="opt.value">
            {{ opt.label }}
          </option>
        </select>

        <!-- Boolean -->
        <div v-if="field.type === 'boolean'" class="switch-wrapper">
          <input type="checkbox" v-model="localParams[field.name]" :id="field.name" />
          <label :for="field.name">{{ localParams[field.name] ? '是' : '否' }}</label>
        </div>

      </div>
    </div>
    <div v-else class="empty-config">
      该算法无配置参数
    </div>

    <div class="panel-footer">
      <button class="btn btn-secondary" @click="exportConfig">📤 导出配置</button>
      <button class="btn btn-primary" @click="save">💾 确认修改</button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'

const props = defineProps({
  algorithmName: { type: String, default: '未知算法' },
  paramsSchema: { type: Array, default: () => [] },
  modelValue: { type: Object, default: () => ({}) }
})

const emit = defineEmits(['update:modelValue', 'save'])

const localParams = ref({})

// Initialize params
const initParams = () => {
  const defaults = {}
  props.paramsSchema.forEach(field => {
    defaults[field.name] = field.default !== undefined ? field.default : (field.type === 'number' ? 0 : '')
  })
  // Merge with passed value
  localParams.value = { ...defaults, ...props.modelValue }
}

watch(() => props.modelValue, () => {
  initParams()
}, { deep: true })

watch(() => props.paramsSchema, () => {
  initParams()
})

onMounted(() => {
  initParams()
})

const save = () => {
  emit('update:modelValue', { ...localParams.value })
  emit('save', localParams.value)
}

const exportConfig = () => {
    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(localParams.value, null, 2));
    const downloadAnchorNode = document.createElement('a');
    downloadAnchorNode.setAttribute("href", dataStr);
    downloadAnchorNode.setAttribute("download", `${props.algorithmName}_config.json`);
    document.body.appendChild(downloadAnchorNode); // required for firefox
    downloadAnchorNode.click();
    downloadAnchorNode.remove();
}
</script>

<style scoped>
.algorithm-config-panel {
  background: white;
  border-left: 1px solid #e6e6e6;
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.panel-header {
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.config-form {
  flex: 1;
  overflow-y: auto;
}

.form-item {
  margin-bottom: 15px;
}

.form-label {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  color: #606266;
  font-weight: 500;
}

.required {
  color: red;
  margin-left: 4px;
}

.tooltip {
  cursor: help;
  margin-left: 5px;
  font-size: 12px;
}

input[type="text"],
input[type="number"],
select {
  width: 100%;
  padding: 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
}

input:focus, select:focus {
  border-color: #409eff;
  outline: none;
}

.switch-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-footer {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn {
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  font-size: 13px;
}

.btn-primary {
  background: #409eff;
  color: white;
}

.btn-secondary {
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
}

.empty-config {
  color: #909399;
  text-align: center;
  margin-top: 50px;
}
</style>
